import React, { Component } from 'react'
import axios from 'axios'
export default class Cinema extends Component {
  // 请求数据
  constructor() {
    super()
    this.state = {
      cinemaList: [],
      bakList: []
    }
    // 通过axios第三方库
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=4571642',
      method: 'get',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16590874811795528257961985"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
        console.log(res.data.data.cinemas);
        this.setState({
          cinemaList: res.data.data.cinemas,
          bakList: res.data.data.cinemas
        })
    }).catch(err => {
        console.log(err);
    })
  }

  render() {
    return (
      <div>
        <input onInput={ this.handelInput }></input>
        <div>
          {
            this.state.cinemaList.map(item => 
              <dl key={item.cinemaId}>
                <dt>{ item.name }</dt>
                <dd>{ item.address }</dd>
              </dl>
            )
          }
        </div>
      </div>
    )
  }
  handelInput = (event) => {
    console.log(event.target.value);
    var newList = this.state.bakList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) || item.address.toUpperCase().includes(event.target.value.toUpperCase()))
    this.setState({
      cinemaList: newList
    })
  }
}
